<template>
  <swiper
    :slides-per-view="1"
    :space-between="0"
    loop
    autoplay
    :pagination="{ clickable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    
  >
    <swiper-slide v-for="n in banner" :key="n">
      <a :href="n.link" >
        <img :src="n.image" alt="" @load="$emit('swiperLoad')">
      </a>
    </swiper-slide>
    
  </swiper>
</template>

<script>
import { Swiper,SwiperSlide } from 'swiper/vue';
import SwiperCore, {Autoplay,Pagination} from 'swiper';
 
  SwiperCore.use([Autoplay,Pagination]);
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    props:['banner'],
  
    methods: {
      onSwiper() {
      
      },
      onSlideChange() {
        
      },
    },
  };
</script>

<style scoped>
    img{
      width: 100%;
        
        vertical-align: middle;
    }
</style>